<template>
  <div>
    <Layout ref="layout" width="300px" title="查看参数">
      <pre slot="content" style="white-space: pre-wrap;word-wrap: break-word;">
          {{select}}
        </pre>
    </Layout>
    <etable ref="eTable" v-show="currentState === 'normal'" :columns="columns"
            :tools="['refresh','search']">
    </etable>
  </div>
</template>

<script>
import etable from '@/components/easy-table/easy-table.vue'
import Layout from '../../../../components/layout/layout'
import { getParams } from '../../../../api/sys/operation-log'

export default {
  name: 'log',
  components: {
    Layout,
    etable
  },
  data: function () {
    return {
      select: {},
      url: 'sys/log/operation/list?',
      currentState: 'normal',
      columns: [
        { title: '#', type: 'index', width: 80, align: 'center' },
        {
          title: '操作人',
          key: 'username',
          align: 'center',
          width: 100,
          searchType: 'input'
        },
        { title: '动作', key: 'operation', align: 'center', minWidth: 100, searchType: 'input' },
        { title: 'Ip地址', key: 'ip', align: 'center', width: 150 },
        { title: '操作系统', key: 'monitorSystem', align: 'center', width: 150 },
        { title: '浏览器', key: 'browser', align: 'center', width: 150 },
        { title: '浏览器版本', key: 'browserVersion', align: 'center', width: 150 },
        { title: '用时', key: 'time', align: 'center', width: 150 },
        {
          title: '执行时间',
          key: 'createDate',
          align: 'center',
          width: 150,
          sortable: true,
          searchType: 'datetimerange',
          alias: 't'
        },
        {
          title: '查看参数',
          align: 'center',
          width: 150,
          render: (h, params) => {
            const row = params.row
            return h('Button', {
              on: {
                'click': () => {
                  getParams(row.id).then(res => {
                    this.select = res.data.params
                    this.$refs['layout'].show()
                  })
                }
              },
              props: {
                type: 'primary'
              }
            }, '查看')
          }
        }
      ]
    }
  },
  methods: {
    init () {
      this.$refs['eTable'].init(this.url)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
